<template>
    <div id="polyvVideo">
        <video ref="video" id="pvideo" class="video-js vjs-default-skin  vjs-big-play-centered" style="width:100vw; height:calc(100vh - 30px)" data-setup='{"nativeControlsForTouch":false}' controls preload="auto">
            <source :src="videoSrc" type="application/x-mpegURL">
            <!-- <track kind='subtitles' :src=vttSrc srclang='zh' label='Chinese' default /> -->
        </video>
        <div v-if="showleft" class="marquee-left" width="15%" >
            <span>{{marquee}}</span>
        </div>
        <div v-if="showleft" class="marquee-right" width="15%" >
            <span>{{marquee}}</span>
        </div>
    </div>
</template>
<script>
import * as fs from 'fs';
import { SqlLib } from '../../../../../static/lib/sqlite/SqlLib'
import { SqlLibUser } from '../../../../../static/lib/sqlite/service/SqlLibUser'
import mixin from '../../mixin/mixin'
import { Ini } from '../../../content/utils/ini';
const cryUtil = require('../../../../../static/utils/CrypUtil');
let intervalTime = null
export default {
    name: "PolyvVideo",
    mixins: [mixin],
    data () {
        return {
            marquee: '',
            marqueeTime:'',
            videoSrc: '',
            isPlay: true,
            player: null,
            time: null,
            showleft:true,
        }
    },
    created () {
        console.log('PolyvVideo');
        let sqlLib = SqlLib.getInstance(window.$DBDIR)
        let user = SqlLibUser.queryCurrentUser(sqlLib)
        //TODO:暂时使用VIP类别判断后续可能更改成付费策略
        let curVipType = user ? user.vipType : ''
        curVipType = cryUtil.aesDecrypt(curVipType, user.id, true);
        curVipType = Buffer.from(curVipType, 'base64').toString('utf8');
        this.marquee = user ? (curVipType === '0' ? user.schoolName : (user.mobile.slice(0, 3) + "****" + user.mobile.slice(7))) : ''
        let eduLevel = Ini.readIni('data', 'eduLevel')
        this.videoSrc = `http://127.0.0.1:${eduLevel === 'primary' ? '38001' : '38002'}/${this.bsr.meta_info.meta_type}/${this.bsr.meta_info.meta_id}/video/${this.bsr.vid}/hlsIndex.m3u8`
        const path = require('path')
        let filePath = path.join(window.$DATADIR, 'resc','PolyvVideo',`${this.bsr.meta_info.meta_id}`,'video',`${this.bsr.vid}`,'hlsIndex.m3u8')
        console.log('filePath',filePath);
        if (!fs.existsSync(filePath)) {
            console.log('没有该文件');
            this.$message.error({
                message:'视频文件下载失败或损坏，请重新下载后再次尝试',
                duration:3000,
            })
        }
        // let videoCssEL = document.createElement('link')
        // videoCssEL.setAttribute('herf', '/static/lib/viedo/video-js.css')
        // document.head.appendChild(videoCssEL)
        // let videoJsEL = document.createElement('script')
        // videoJsEL.setAttribute('src', '../../../../../static/lib/viedo/video.js')
        // document.head.appendChild(videoJsEL)
        // let videoCHEL = document.createElement('script')
        // videoCHEL.setAttribute('src', '/static/lib/viedo/videojs-contrib-hls.js')
        // document.head.appendChild(videoCHEL)
    },
    mounted () {
       
        this.$nextTick(() => {
            this.player = videojs('pvideo', {
                preload: 'auto',
            })
            this.player.play()
            const Play = this.player
            videojs.hook('error',(Play , err) =>{
                console.log('error',err);
            })
        })
        
        // this.leftMarquee()
        
    },
    methods: {
        leftMarquee(){
            console.log('qwer');
            var marqueeLeft = document.getElementsByClassName('marquee-left')
            var time = 5 + Math.round(Math.random()*5); 
            marqueeLeft.style.animationDuration = time;
            // document.getElementsByClassName('marquee-left').style.animationDuration = '16s'
            console.log(time);
            setTimeout(function(){
                this.showleft = false
            },time)
        }
    }
}
</script>

<style lang="scss">
#polyvVideo {
    position: relative;
    .vjs-fullscreen-control {
        display: none !important;
    }
    .marquee-left {
        color: rgba(255, 255, 255, 0.7);
        font-size: 18px;
        width: auto;
        opacity: 0;
        position: absolute;
        bottom: 40px;
        left: 4%;
        animation: left 16s 1s linear infinite;
    }
    .marquee-right {
        color: rgba(255, 255, 255, 0.7);
        font-size: 20px;
        width: auto;
        opacity: 0;
        position: absolute;
        bottom: 40px;
        text-align: right;
        right: 4%;
        animation: right 16s 1s linear infinite;
    }
    @keyframes left {
        0%{
            opacity: 0;
        }
        12%{
            opacity: 0.5;
        }
        25%{
            opacity: 1;
        }
        50%{
            opacity: 0;
        }
        100%{
            opacity: 0;
        }
    }
    @keyframes right {
      0%{
          opacity: 0;
      }
      50%{
          opacity: 0;
      }
      62%{
          opacity: 0.5;
      }
      75%{
          opacity: 1;
      }
      100%{
          opacity: 0;
      }
    }
    .video-js .vjs-volume-panel.vjs-volume-panel-horizontal {
        width: 9em;
    }
    .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
        width: 5em;
        height: 3em;
    }
    .video-js .vjs-volume-panel .vjs-volume-control {
        // visibility: visible;
        opacity: 1;
        position: relative;
    }
}
</style>
